  <div class="middle surface-shaded">
    <div class="middle-content">
      <div class="container-fluid">
        <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
        <h1>{{category.label}}</h1>
        <div ng-if="category.description" class="help-block mar-bottom-lg">{{category.description}}</div>

        <!-- If a category has subcategories, display it as a catalog. -->
        <div ng-if="category.subcategories">
          <catalog
              project-name="projectName"
              project-image-streams="projectImageStreams"
              openshift-image-streams="openshiftImageStreams"
              project-templates="projectTemplates"
              openshift-templates="openshiftTemplates"
              category="category">
          </catalog>
        </div>

        <!-- Otherwise, show the content. -->
        <div ng-if="!category.subcategories">
          <category-content
              project-name="projectName"
              project-image-streams="projectImageStreams"
              openshift-image-streams="openshiftImageStreams"
              project-templates="projectTemplates"
              openshift-templates="openshiftTemplates"
              category="category">
          </category-content>
        </div>
      </div><!-- /container -->
    </div><!-- /middle-content -->
  </div><!-- /middle -->
